import React from 'react';
import './index.css';
import HeaderLayout from "../../Layout/HeaderLayout";
import HotLeftIcon from "../../Component/HotLeftIcon";
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import IFrame from '../../Component/IFrame';
import IFrameUtil from "../../utils/IFrameUtil";
import { Breadcrumb } from 'antd';
import HotText from '../../Suspension/HotText';
import { Modal } from 'antd';

const { Search } = Input;

export default class Hot extends React.Component{
    constructor(props){
        super();
        this.state={
            introduce:true,
            info:false,
            law:false,
            title:"Fly派",

            searchContent:"",
            infoContent:"",
            lawContent:"",

            linkModelVisible:false,
            link:""
        }
    }
    componentDidMount(){
        let iframe=IFrameUtil.GetIFrame();
        if(iframe!==undefined){
            iframe.src="/hotNewList";
            document.title="派热点";
            IFrameUtil.UpdateIframeHeight();
        }
        // 监听message事件
        window.addEventListener("message", this.receiveMessage, false);
        // window.addEventListener("resize", this.UpdateIframeHeight);
    }

    Search(){
        if(this.state.info){
            this.setState({
                infoContent:this.state.searchContent
            },()=>{
                let info=document.getElementById("profession");
                console.log(info)
                if(info!==undefined && info!==null){
                    info.click();
                }
            });
        }
        if(this.state.law){
            this.setState({
                lawContent:this.state.searchContent
            },()=>{
                let law=document.getElementById("law");
                if(law!==undefined && law!==null){
                    law.click();
                }
            });
        }
    }
    checkedIntroduce(e){
        this.ClearSelect();
        this.setState({
            introduce:true,
            title:"Fly派"
        });
    }
    checkedInfo(e){
        this.ClearSelect();
        this.setState({
            info:true,
            title:"行业资讯"
        });
    }
    checkedLaw(e){
        this.ClearSelect();
        this.setState({
            law:true,
            title:"法律法规"
        })
    }
    ClearSelect(){
        this.setState({
            introduce:false,
            info:false,
            law:false,
        })
    }
    componentWillUnmount(){
        window.removeEventListener("message", this.receiveMessage, false);
        // window.removeEventListener("resize", this.UpdateIframeHeight);
    }
    receiveMessage =  ( event ) => {
        if(event!==undefined &&event.data && event.data.name){
            switch(event.data.name)
            {
                case "ChangeHeight":
                    IFrameUtil.UpdateIframeHeight(event);
                    break;
                case "Hot":
                    this.setState({
                        linkModelVisible:true,
                        link:event.data.link
                    })
                    break;
                case "HotModelHidden":
                    this.setState({
                        linkModelVisible:false
                    })
                    break;
                default:
                    break;
            }
        }
    };
      handleOk = e => {
        console.log(e)
        this.setState({
          linkModelVisible: false,
        });
      };
    
      handleCancel = e => {
          console.log(e)
        this.setState({
          linkModelVisible: false,
        });
      };
    render(){
        return(
            <div className="Hot_Body">
                <HeaderLayout notHome="true" activeID={4}/>
                <div className="Hot_Content">
                    <div className="Hot_Left">
                        <div className="Hot_Page_Top">
                            <Breadcrumb>
                                <Breadcrumb.Item>
                                    <a href="/">首页</a>
                                </Breadcrumb.Item>
                                <Breadcrumb.Item>
                                <a href="">派.热点</a>
                                </Breadcrumb.Item>
                                <Breadcrumb.Item>{this.state.title}</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div  onClick={e=>this.checkedIntroduce(e)}>
                            <a href="/hotNewList" target="Layout_MainContainer">
                                <HotLeftIcon type="1" active={this.state.introduce}  text="Fly派" subtext="什么什么介绍等等..."/>
                            </a>
                        </div>
                        <div onClick={e=>this.checkedInfo(e)} >
                            <a href={"/hotProfession/"+this.state.infoContent} id="profession" target="Layout_MainContainer">
                                <HotLeftIcon type="2" active={this.state.info} text="行业资讯" subtext="什么什么介绍等等..."/>
                            </a>
                        </div>
                        <div onClick={e=>this.checkedLaw(e)} >
                            <a href={"/hotLaw/"+this.state.lawContent} id="law" target="Layout_MainContainer">
                                <HotLeftIcon type="3" active={this.state.law} text="法律法规" subtext="什么什么介绍等等..."/>
                            </a>
                        </div>
                    </div>
                    <div className="Hot_Right">
                        <div className="Hot_Page_Top">
                            <div className="Hot_Search">
                                <Search
                                    prefix={<SearchOutlined />}
                                    placeholder="搜索"
                                    enterButton="搜索"
                                    size="large"
                                    onSearch={value =>this.Search(value)}
                                    onChange={e=>this.setState({searchContent:e.target.value})}
                                    />
                            </div>
                        </div>
                        <div>
                            <IFrame/>
                        </div>
                    </div>
                </div>
                <Modal
                    title="支付"
                    visible={this.state.linkModelVisible}
                    onOk={e=>this.handleOk(e)}
                    onCancel={e=>this.handleCancel(e)}
                    footer={null}
                    >
                    <HotText link={this.state.link}/>
                </Modal>
            </div>
        )
    }
}